
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <script type="text/javascript" src="{{ asset('js/module.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('css/module.css') }}">
    <script type="text/javascript" src="{{ asset('js/vue.min.js') }}"></script>
    <title>就餐预定系统</title>
    <style>
        body{font-size: 2rem;background-color: #f7f7f7;}


        .sorelist{font-size: 16px;margin-top: 2rem;
            padding: 2rem 2rem;
            background: #f7f7f7;
            border-radius: 1rem;}
        .sorelist>div:first-child{justify-content: space-between;display: flex;align-items: center;}
        .sorelist>div:nth-child(3){margin-top: 2rem;
            background: #ccc;
            border-radius: 30px;}
        .sorelist input{width: 7rem;
            text-align: center;
            line-height: 5rem;
            border: none;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 4px;}
        #clicksure{width: 60%;
            line-height: 6rem;
            text-align: center;
            background: red;
            border-radius: 10rem;
            margin: 4rem auto;
            font-size: 18px;
            color: #fff;}
        #username{
            font-size: 20px;}
        #tylist{justify-content: space-between;
            display: flex;color:#333;
            flex-wrap: wrap;}
        #tylist::after{content: '';
            width:calc(48% - 4rem);    margin: 2rem auto;}
        #tylist>div{background-color: #fff;
            border-radius: 5px;
            width: calc(48% - 4rem);
            margin: 2rem auto;
            position: relative;}
        /* #tylist>div>label{position: absolute;
        width: calc(100% - 15px);
        height: 100%;
        top: 0;
        left: 0;
        padding-left: 15px;} */
        #tylist>div>label{display: block;padding: 1rem;}
        #tylist>div>input[name='canyin']:checked +label{border:1px solid green;color:green;border-radius: 5px;}

    </style>
</head>
<body>
<div id="mybody">
    <p style="padding: 4rem 4rem 2rem;
    justify-content: space-between;
    display: flex;">
        <span id="username"></span>
        <span onclick="deluser()" style="background: red;
    line-height: 30px;
    display: block;
    font-size: 12px;
    width: 70px;
    text-align: center;
    color: #fff;
    border-radius: 5px;">登录退出</span>
    </p>
    <p style="padding: 0 4rem 1rem;font-size: 3rem;">盐城分行食堂临时就餐预定系统</p>
    <div id="tylist"></div>
    <p id="clicksure" @click="getdaan()">提交</p>
</div>
</body>
<script>

    window.mytokens=window.localStorage.getItem('mytokens')
    console.log(mytokens)
    if(mytokens=='' || mytokens==null){
        window.location.href="http://meal.zyy.sn.cn/login"
    }
    window.num=1
    var app = new Vue({
        el: '#mybody',
        data: function() {
            return {

            }
        },
        updated(){
        },
        created(){

        },
        methods: {
            myVue(){
                $.ajax({
                    type: "GET",
                    url: "api/user_info",
                    data: {
                    },
                    beforeSend: function(request) {
                        request.setRequestHeader("token",mytokens);
                    },
                    dataType: "json",
                    success: function(date) {
                        panduantokens(date.code)
                        if(date.code==0){
                            $("#username").html(date.data.name+'您好，您已登录')
                        }
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "api/good",
                    data: {
                    },
                    beforeSend: function(request) {
                        request.setRequestHeader("token",mytokens);
                    },
                    dataType: "json",
                    success: function(date) {
                        panduantokens(date.code)
                        if(date.code==0){
                            var mydata=date.data.good
                            let crr=[]
                            if(date.data.order=='' || date.data.order==null || date.data.order==undefined){}else{
                                crr=date.data.order.goods_name.split(',')
                                $("#clicksure").hide()
                            }
                            if(crr==''){
                                for(x in mydata){
                                    console.log(mydata[x])
                                    $("#tylist").append(`
                    <div>
                      <input id="myname`+mydata[x].id+`" name="canyin" type="radio" value="`+mydata[x].name+`" style="opacity:0;position: absolute;">
                      <label for="myname`+mydata[x].id+`">
                        <img style="width:100%;border-radius: 5px;" src="storage/`+mydata[x].img+`" />
                        <span style="display: block;padding: 1rem 0;">`+mydata[x].name+`</span>
                      </label>
                    </div>
                  `)
                                }
                            }else{
                                for(x in mydata){
                                    if(crr.indexOf(mydata[x].name)==-1){
                                        $("#tylist").append(`
                      <div>
                        <input disabled="disabled" id="myname`+mydata[x].id+`" name="canyin" type="radio" value="`+mydata[x].name+`" style="opacity:0;position: absolute;">
                        <label for="myname`+mydata[x].id+`">
                        <img style="width:100%;border-radius: 5px;" src="storage/`+mydata[x].img+`" />
                        <span style="display: block;padding: 1rem 0;">`+mydata[x].name+`</span></label>
                      </div>
                    `)
                                    }else{
                                        $("#tylist").append(`
                      <div>
                        <input disabled="disabled" id="myname`+mydata[x].id+`" name="canyin" checked="checked" type="radio" value="`+mydata[x].name+`" style="opacity:0;position: absolute;">
                        <label for="myname`+mydata[x].id+`">
                        <img style="width:100%;border-radius: 5px;" src="storage/`+mydata[x].img+`" /><span style="display: block;padding: 1rem 0;">`+mydata[x].name+`</span></label>
                      </div>
                    `)
                                    }

                                }
                            }

                        }
                    }
                })
            },
            getdaan(){
                var arry = new Array();
                //循环所有选中的值
                $('input[name="canyin"]:checked').each(function(index, element) {
                    //追加到数组中
                    arry.push($(this).val());
                });
                //将数组元素连接起来转化为字符串
                var arrystr = arry.join(',');
                $.ajax({
                    type: "POST",
                    url: "api/good",
                    data: {
                        goods_name:arrystr
                    },
                    beforeSend: function(request) {
                        request.setRequestHeader("token",mytokens);
                    },
                    dataType: "json",
                    success: function(date) {
                        panduantokens(date.code)
                        if(date.code==0){
                            newalert("提交成功",2000)
                            setTimeout(() => {
                                window.location.href='http://meal.zyy.sn.cn/'
                            }, 1000);
                        }else {
                            newalert(date.msg,3000)
                        }
                    }
                })
            },
        },
    })
    app.myVue()
    function deluser(){
        localStorage.clear();
        window.location.href="http://meal.zyy.sn.cn/login"
    }
</script>

</html>
